<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>真会学-登陆界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all" type="text/css">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all" type="text/css">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/login.css}" media="all" type="text/css">
    <style>
        #main_content {
            position: relative;
            left: 0;
            top: 0;
            padding: 110px 0;
            min-height: 100%;
            box-sizing: border-box;
        }

        .login_content {
            width: 375px;
            margin: 0 auto;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div id="main_content">

    <div class="login_content">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>登陆</h2>
            <p>欢迎使用</p>
        </div>
<!--        onsubmit="return false"-->
        <form id="form" class="layui-form" lay-filter="example" th:action="@{/doLogin}" method="post" >
            <div class="layadmin-user-login-box layadmin-user-login-body ">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                           for="username"></label>
                    <input type="text" name="num" id="username" lay-verify="required"
                           placeholder="学号/教工号" class="layui-input" checked>
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="password"></label>
                    <input type="password" name="password" id="password" lay-verify="required"
                           placeholder="密码" class="layui-input" checked>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                                   for="LAY-user-login-vercode"></label>
                            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
                                   placeholder="图形验证码" class="layui-input">
                            <span id="check_remind" style="color: red;display:none" ></span>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img src="/kaptcha/getKaptchaImage" class="layadmin-user-login-codeimg"
                                     id="LAY-user-get-vercode">
                                <a href="javaScript:" class="l-color9 reloadImage">看不清楚，换一张</a>
                            </div>
                        </div>
                    </div>
                </div>
<!--                <div class="layui-form-item" style="margin-bottom: 20px;">-->
<!--                    <label class="layui-form-label" style="padding: 9px 0px; width: 55px; text-align: left;">记住我</label>-->
<!--                    <input type="checkbox" name="rememberme" value="true" lay-skin="switch" lay-filter="switchTest"-->
<!--                           lay-text="OFF|ON">-->
<!--                </div>-->
                <div class="layui-form-item">
                    <button disabled type="submit" id="submit" class="layui-btn layui-btn-fluid layui-btn-disabled "   lay-filter="formDemo">点击登录
                    </button>
                </div>
            </div>
        </form>
    </div>

<!--    <footer class="layui-trans layadmin-user-login-footer">-->
<!--        <a href="https://beian.miit.gov.cn/" target="_blank">-->
<!--            皖ICP备2022003330号-->
<!--        </a>-->
<!--    </footer>-->


</div>
<script th:src="@{/static/layuiadmin/layui/layui.js}"  type="text/javascript"></script>
<script th:src="@{/static/js/jquery.js}"  type="text/javascript"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>-->
<script>
    $(".reloadImage").click(function () {
        //获取当前的时间作为参数，无具体意义
        // alert("tt");
        var timenow = new Date().getTime();
        $('#LAY-user-get-vercode').attr("src", "/kaptcha/getKaptchaImage?date=" + timenow);
    });
    function check(){
        if($("#username").val()!==""&&$("#password").val()!==""){
            return true;
        }
         return false;
    }
    // let codeEle=$("#LAY-user-get-vercode")
    // function updateCode(){
    //     codeEle[0].src='/verifycode/get?data=' + new Date().getTime();
    // }
    // codeEle.click(function () {
    //     updateCode()
    // }).click().show();

    //ajax判断验证码是否正确，控制登录按钮是否可点
    $("#LAY-user-login-vercode").bind("input propertychange",function(event){
        // console.log($("#LAY-user-login-vercode").val())
        $.ajax({
            url: '/checkCode',
            type: 'get',
            async: false,
            dataType: "JSON",
            data: {
                "code":$("#LAY-user-login-vercode").val(),
            },
            success(msg){
                if(msg.code===200){
                    $("#submit").unbind("click");
                    if(!$("#submit").hasClass("layui-btn-disabled")){
                        $("#submit").addClass("layui-btn-disabled")
                    }
                    $("#check_remind").html(msg.extend.mc_msg)
                    $("#check_remind").css("display","block")
                }else if(msg.code===100){
                    $("#check_remind").css("display","none")
                    if(check()){
                        $("#submit").removeClass("layui-btn-disabled")
                        $("#submit").removeAttr("disabled")
                    }
                }

            },
            failed(msg){
                console.log("failed",msg)
            }

        })
    });



</script>
</body>
</html>